/**
 *
 */

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: Boolean,
    reservePositionOnClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      show: false,
      fullScreen: false
    }
  },
  methods: {
    closed() {
      if (!this.reservePositionOnClose && this.$refs.dialog) {
        const dialog = this.$refs.dialog.$refs.dialog
        dialog.style.top = 'unset'
        dialog.style.left = 'unset'
      }
      this.exitFullScreen()
    },
    close() {
      this.show = false
    },
    toggleFullScreen() {
      this.fullScreen = !this.fullScreen
    },
    enterFullScreen() {
      this.fullScreen = true
    },
    exitFullScreen() {
      this.fullScreen = false
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newVal) {
        this.show = newVal
      }
    },
    show(newVal) {
      if (newVal !== this.visible) {
        this.$emit('update:visible', newVal)
      }
    }
  },
  beforeDestroy() {
    if (this.show) {
      this.close()
    }
  }
}
